<template>
    <div v-show="vis">
        <el-row :gutter='20' style='height: 580px;'>
            <el-col :offset='6' :span='12' style='height: 580px;'>
<!--                <el-row type="flex" justify="center"  align="middle" style='height: 580px;'>-->
                    <gamemode-center></gamemode-center>
<!--                </el-row>-->
            </el-col>
        </el-row>
    </div>
</template>


<script>
import GamemodeCenter from '@/components/common/dashboards/gameMode/GamemodeCenter';

export default {
    name: 'GameModeDash2',
    data() {
        return {
            alter: '0',
            vis : true
        };
    },
    components: {
        GamemodeCenter
    },
    computed: {},
    created() {
        var _this = this;
        // 监听游戏手柄
        window.addEventListener('gamepadconnected', function(e) {
            var gp = navigator.getGamepads()[e.gamepad.index];
            // console.log(gp);
            _this.startgamepad(); // 启动手柄
        });
        // 监听游戏手柄拔出
        window.addEventListener('gamepaddisconnected', function(e) {
            clearInterval(_this.interval); // 停止获取手柄数据
        });
    },
    methods: {
        // 启动手柄
        startgamepad() {
            var _this = this;
            // 每200ms 获取一次手柄数据，查看是否按下手柄按键
            this.interval = setInterval(function() {
                var gamepad = navigator.getGamepads()[0];
                _this.pressKey(gamepad.buttons);
            }, 200);
        },
        // 手柄按键
        pressKey(arr) {
            // console.log(arr);
            for (let i = 0; i < arr.length; i++) {
                if (arr[i].value === 1) {
                    // 根据个人情况判断；不同手柄值不同。
                    if (i === 8) {
                        this.vis = this.vis === false;
                    }
                }
            }
        }
    },
    mounted() {
    }
};
</script>

<style scoped>
.mgb20 {
    margin-bottom: 10px;
}

* {
    /*text-shadow: 0 0 10px #24a3af, 0 0 20px #24a3af, 0 0 30px #24a3af, 0 0 40px #24a3af;*/
    /*color: white;*/
    background: transparent;
    color: #C0911F;
    font-size: 10px;
}

.elRow {

}
>>> .el-card__body {
    padding: 10px;
    /*border: 1px solid #C0911F;*/
}
>>> .el-card {
    border: 3px solid #C0911F;
    border-radius: 0px;
}

</style>
